/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="dataset-list-warp">
        <div class="dataset-list__title">我的数据集</div>
        <div class="table-data">
            <sf-grid>
                <sf-toolbar ref="toolbar">
                    <div class="pull-left">
                        <sf-button-primary icon-cls="icon-comp-upload-image" @click="creatDataset">创建
                        </sf-button-primary>
                    </div>
                    <div class="pull-right">
                        <sf-button ref="clickBtn" icon-cls="icon-comp-filter">
                            <lang>筛选</lang>
                        </sf-button>
                        <sf-layer ref="layerRef"
                                  default-target="clickBtn"
                                  trigger="click"
                                  :append-to-body="false"
                                  :default-width="296"
                                  :default-height="105">
                            <div class="toolbar-screening">
                                <div class="toolbar-screening__top">
                                    <sf-fieldlabel :label-width="72">数据集来源</sf-fieldlabel>
                                    <sf-select v-model="searchParams.queryType"
                                               :default-width="170"
                                               size="small"
                                               :options="FROM_LIST"/>
                                </div>
                                <el-divider/>
                                <div class="toolbar-screening__bottom">
                                    <sf-button-primary size="small" @click="screenClick">确认</sf-button-primary>
                                    <sf-button size="small" @click="hideLayer">取消</sf-button>
                                </div>
                            </div>
                        </sf-layer>
                        <sf-searchfield v-model="searchParams.searchKeyword"
                                        class="search-customer"
                                        :placeholder="_('请输入搜索关键字')"
                                        :max-length="200"
                                        :auto-trigger-clear="true"
                                        @trigger="searchClick"/>
                    </div>
                </sf-toolbar>
                <sf-table
                    ref="table"
                    :options="options_fix"
                    @pagechange="_onPageChange"
                    @sizechange="_onSizeChange"
                >
                    <sf-table-column
                        data-index="dataset"
                        :default-width="70">
                        <lang>数据集名称</lang>
                    </sf-table-column>
                    <template slot="dataset"
                              slot-scope="{value, record}">
                        <el-link :underline="false" type="primary" @click="toDetail(record)">{{ value }}</el-link>
                    </template>
                    <sf-table-column
                        data-index="dataspace"
                        :default-width="70">
                        <lang>所属数据空间</lang>
                    </sf-table-column>
                    <sf-table-column
                        data-index="create_time"
                        :default-width="70">
                        <lang>数据集创建时间</lang>
                    </sf-table-column>
                    <sf-table-column
                        data-index="size"
                        :default-width="100">
                        <lang>数据集大小</lang>
                    </sf-table-column>
                    <template slot="size" slot-scope="{value}">
                        {{ value === 0 ? 1 : value }}M
                    </template>
                    <sf-table-column
                        data-index="owner"
                        :default-width="100">
                        <lang>创建人</lang>
                    </sf-table-column>
                    <sf-table-column
                        data-index="source"
                        :default-width="100">
                        <lang>数据集来源</lang>
                    </sf-table-column>
                    <template slot="source" slot-scope="{value}">
                        {{ FROM_MAP[value] }}
                    </template>
                    <sf-table-column data-index="opr"
                                     :default-width="70">
                        <lang>操作</lang>
                    </sf-table-column>
                    <!--额外操作-->
                    <template slot="opr"
                              slot-scope="{record}">
                        <div class="table-opr">
                            <link-btn :ref="'hoverLink'+record.data_id">操作 <i
                                class="sf-comp-iconfont icon-comp-arrow-down-big"></i></link-btn>
                            <sf-menu anchor="bottom" :default-target="'hoverLink'+record.data_id">
                                <sf-menu-item @click="toDetail(record)">
                                    <lang>编辑</lang>
                                </sf-menu-item>
                                <sf-menu-item :default-disabled="record.source==='shared'"
                                              @click="shareDataset(record)">
                                    <lang>分享</lang>
                                </sf-menu-item>
                                <sf-menu-item @click="_deleteDataset(record)">
                                    <lang>删除</lang>
                                </sf-menu-item>
                            </sf-menu>
                        </div>
                    </template>
                </sf-table>
            </sf-grid>
        </div>
    </div>
</template>

<script>
import {debounce} from 'src/util/delay';
import LinkBtn from 'src/components/link_btn';
import store from 'src/vuex/store';
import ShareModal from "./share_modal";


let userID = store.state.userId;

const PAGE_COUNT = 20;

const FROM_MAP = {
    'all': _('所有'),
    'personal': _('个人'),
    'shared': _('分享'),
    // 'pro': _('数据工程'),
}

export default {
    components: {
        LinkBtn
    },
    
    data() {
        return {
            searchParams: {
                page: 1,  // 查询第几页的数据，默认第一页
                pageSize: PAGE_COUNT,  // 每页展示多少条
                queryType: 'all',
                searchKeyword: '',
                username: userID,
            },
            options_fix: {
                selectionHide: true,
                pagination: {
                    activePage: 1,
                    pageSize: PAGE_COUNT,
                    pageSizes: [Number('10'), Number('20'), Number('50')]
                }
            }
        }
    },
    
    props: {
        data: {
            type: Object
        }
    },
    
    computed: {
        FROM_MAP() {
            return FROM_MAP;
        },
        FROM_LIST() {
            return Object.keys(FROM_MAP).map(item => ({
                value: item,
                label: FROM_MAP[item]
            }))
        }
    },
    
    watch: {
        data: {
            handler() {
                this.$refs.table?.loadData(this.data.list);
                this.$refs.table?.getPagination().setTotal(this.data.total);
            },
            deep: true,
        },
    },
    created() {
        this.searchClick = debounce(this.searchClick, 500)
    },
    mounted() {
        this.$refs.table.loadData(this.data.list)
    },
    methods: {
        
        getList() {
            this.$emit('get-list', this.searchParams)
        },
        
        _deleteDataset(record) {
            this.$confirm({
                title: _('删除数据集'),
                subTitle: _('确认要删除“{0}”吗？', record.dataset),
                msg: _('删除后数据集将无法恢复。'),
                autoClose: true,
                submitLoading: true,
                callback: async actionName => {
                    if (actionName === 'submit') {
                        this.$mask();
                        const jsonData = await this.$ajax.delete(`/ai-datalake/api/v1/dataspaces/${record.dataspace}/datasets/${record.dataset}`);
                        this.$unmask();
                        let {success, msg} = jsonData;
                        if (!success) {
                            return this.$showErr(msg || _('删除失败'));
                        }
                        this.$ok(_('删除成功'));
                        this.getList();
                    }
                }
            });
        },
        
        searchClick() {
            this.getList();
        },
        
        _onPageChange(pageNum) {
            Object.assign(this.searchParams, {
                page: pageNum
            });
            this.getList();
        },
        
        _onSizeChange(nowPageIndex, nowPageSize) {
            Object.assign(this.searchParams, {
                page: nowPageIndex,
                pageSize: nowPageSize
            });
            this.getList();
        },
        
        creatDataset() {
            this.$router.push({
                name: 'creat_dataset', query: {
                    name: 'creat_dataset'
                }
            })
        },
        
        hideLayer() {
            this.$refs.layerRef?.hide();
        },
        
        toDetail(record) {
            this.$router.push({
                name: 'dataset_detail',
                query: {
                    name: 'dataset_detail',
                    dataspace: record.dataspace,
                    dataset: record.dataset,
                    source: record.source
                }
            });
        },
        
        screenClick() {
            this.getList();
            this.$refs.layerRef?.hide();
        },
        
        async shareDataset(record) {
            const jsonData = await this.$ajax.get(`/ai-datalake/api/v1/shared-datasets`, {
                username: userID,  // 用户名
                dataspace: record.dataspace, // 数据空间名称
                dataset: record.dataset,  // 数据集名称
                resourceType: "dataset"
                
            });
            let {success, msg, data} = jsonData;
            if (!success) {
                this.$showErr(msg);
                return;
            }
            this.$modal(ShareModal, {
                title: _('分享数据集'),
                autoDestroy: true,
                width: 560,
                cls: 'share-modal',
                // height: 516,
                buttons: [
                    // {
                    //     cls: 'sfv-btn-primary',
                    //     text: _('确认'),
                    //     actionName: 'submit'
                    // },
                    {
                        cls: 'sfv-btn',
                        text: _('关闭'),
                        actionName: 'cancel'
                    }
                ],
            }).open({
                data: {
                    data: data,
                    username: userID,  // 用户名
                    dataspace: record.dataspace, // 数据空间名称
                    dataset: record.dataset  // 数据集名称
                }
            })
            
            
        }
    }
}
</script>

<style lang="less">
.share-modal {
    background-color: #ebedf0;
    
    .sfv-modal_header {
        background-color: #ebedf0;
    }
    
    .sfv-modal_footer {
        background-color: #ebedf0;
    }
}

</style>
<style lang="less" scoped>
.dataset-list-warp {
    padding: 18px 32px 8px 32px;
    height: 100%;
    
    .dataset-list__title {
        font-size: 20px;
        font-weight: 600;
        color: #000;
        height: 30px;
        line-height: 30px;
        margin-bottom: 2px;
    }
    
    .table-data {
        height: calc(100% - 32px);
        
        .sfv-toolbar {
            /deep/ .sfv-toolbar_inner {
                padding: 8px 0 !important;
            }
            
            .pull-left {
                .sfv-btn {
                    color: #fff
                }
                
            }
            
            .pull-right {
                .sfv-btn {
                    border: 1px solid #CCCFD9;
                    width: 88px;
                    margin-right: 3px;
                }
                
                .toolbar-screening {
                    padding: 16px 16px 0 16px;
                    
                    &__top {
                        display: flex;
                        align-items: center;
                        
                        .sfv-fieldlabel {
                            padding-left: 0;
                            line-height: 16px;
                            margin-right: 8px;
                        }
                    }
                    
                    .el-divider {
                        margin-top: 20px;
                        margin-bottom: 8px;
                    }
                    
                    &__bottom {
                        display: flex;
                        justify-content: flex-end;
                        
                        .sfv-btn {
                            width: 42px;
                            height: 24px;
                            padding: 4px 8px;
                            font-size: 12px;
                            font-weight: normal;
                            border-radius: 2px;
                            line-height: 16px;
                            text-align: center;
                        }
                        
                        .sfv-btn-primary {
                            color: #fff;
                            margin-right: 8px;
                        }
                    }
                }
            }
        }
        
        /deep/ .sfv-table {
            .sfv-table_cell-center {
                text-align: center !important;
            }
            
            .sfv-table_cell-left {
                text-align: left !important;
            }
            
            .sfv-table_header {
                .sfv-table_header-row {
                    .sfv-table_header-cell {
                        height: 36px;
                        line-height: 36px;
                        font-weight: normal;
                    }
                }
            }
            
            .sfv-table_body {
                .sfv-scrollbar-body {
                    width: 100%;
                }
            }
            
            .sfv-pagination__wrapper {
                bottom: 0;
                padding: 5px;
            }
        }
    }
    
}
</style>
